<template>
  <div class="switch">
    <div
      class="g-clickable switch__inner"
      :class="{ active: value, minSwitch: min }"
      @click="emitSwitch"
    >
      <div class="switch__slider">
        <div class="switch__slider__dot" />
      </div>
    </div>
    <div class="switch__text" v-if="text">
      {{ text }}
    </div>
  </div>
</template>

<script>
export default {
  name: "SwitchBase",
  props: {
    value: {
      type: Boolean,
      require: true,
    },
    min: {
      type: Boolean,
      require: false,
    },
    text: {
      type: String,
      default: "",
    },
  },
  methods: {
    emitSwitch() {
      this.$emit("input", !this.value);
    },
  },
};
</script>

<style lang="scss" scoped>
.switch {
  display: flex;
  align-items: center;
}

.switch__text {
  font-size: 14px;
  font-family: "Roboto Bold";
  margin-left: 10px;
}
.switch__inner {
  display: inline-block;
  position: relative;
  height: 32px;
  width: 56px;
  cursor: pointer;
  vertical-align: middle;

  &.active {
    .switch__slider {
      background: var(--color-grey);
    }
    .switch__slider__dot {
      left: calc(100% - 26px);
      background: var(--color-dark);
    }
  }

  .switch__slider {
    width: 100%;
    height: 32px;
    display: inline-block;
    vertical-align: middle;
    border: 3px solid var(--color-grey);
    box-sizing: border-box;
    border-radius: 100px;
    transition: background-color 0.3s;
  }

  .switch__slider__dot {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 21px;
    height: 21px;
    background: var(--color-grey);
    border-radius: 50%;
    transition: all 0.3s;
  }
}
.minSwitch {
  &.active {
    .switch__slider__dot {
      left: calc(100% - 23px);
    }
  }
  .switch__slider {
    height: 28px;
  }

  .switch__slider__dot {
    width: 18px;
    height: 18px;
  }
}
</style>
